<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              prop="roleName"
              label="角色名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="180"
            ></el-table-column>
            <el-table-column prop="operation" label="操作" width="180">
              <template slot-scope="scope">
                <el-button @click="editMenu(scope.row)">角色菜单设置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>

    <!-- 弹窗 -->
    <el-dialog
      title="修改角色菜单权限"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="defaultSelected"
        :props="defaultProps"
        ref="tree"
      >
      </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  mounted() {
    window.vue = this;
  },
  created() {
    this.selRole();
  },
  data() {
    return {
      currentRoleId: "",
      defaultSelected: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      data: [],
      dialogVisible: false,
      tableData: [],
    };
  },
  methods: {
    submit() {
      let menuIdList = [];
      let arr = vue.$refs.tree.getCheckedNodes(false, true);
      arr.forEach((e) => {
        menuIdList.push(e.id);
      });
      // console.log(menuIdList);
      // console.log(this.currentRoleId);
      let params = {};
      params.roleId = this.currentRoleId;
      params.menuId = menuIdList;
      this.$axios
        .post("api/uums-server/updateRoleMenu", params)
        .then((response) => {
          if (response.data.code == 200) {
            this.selRole();
            this.dialogVisible = false;
            this.$message({
              showClose: true,
              message: "角色菜单修改成功",
              type: "success",
            });
          }
        });
    },
    handleClose() {},
    selRole() {
      this.$axios.get("api/uums-server/selRole").then((response) => {
        if (response.data.code == 200) {
          // console.log(response.data.data);
          this.tableData = response.data.data;
        }
      });
    },
    editMenu(row) {
      this.currentRoleId = row.id;
      this.dialogVisible = true;
      // console.log(row);
      this.$axios.get("api/uums-server/selAllMenu").then((response) => {
        this.data = response.data.data;
        // console.log(this.data);
      });

      this.$axios
        .get("api/uums-server/selDefaultSelected", {
          params: { roleId: row.id },
        })
        .then((response) => {
          if (response.data.code == 200) {
            // console.log(response.data.data);
            this.defaultSelected = [];
            response.data.data.forEach((e) => {
              this.defaultSelected.push(e.menuId);
            });
          }
        });
    },
  },
};
</script>

<style scoped></style>
